<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script src="js/cookie.js"></script>
<script>

    // var cookie = document.cookie;
    // var goodsList = [];
    // if (cookie) {
    //     var dataArr = cookie.split("; ");
    //     for (var i = 0; i < dataArr.length; i++) {
    //         var item = dataArr[i];
    //         console.log(item);
    //         if (item.indexOf("goodsId_") == 0) {
    //             var goodsId = item.split("=")[1];
    //             goodsList.push(goodsId);
    //         }
    //     }
    // }
    // console.log(goodsList);
    var tbody = document.querySelector("tbody");

    var cookie = document.cookie;
    var goodsList = [];
    // console.log(cookie)
    if (cookie) {
        var reg = /goodsId_[A-Z]\w+/ig;
        var arr = cookie.match(reg);
        // console.log(arr);
        for (var i = 0; i < arr.length; i++) {
            var goodsId = arr[i].split("_")[1];
            goodsList.push(goodsId);
        }
    }
    console.log(goodsList);

    var html = "";
    goodsList.forEach(function (item, index) {
        var goodsId = getCookie("goodsId_" + item);
        var goodsName = getCookie("goodsName_" + item);
        var goodsImg = getCookie("goodsImg_" + item);
        var goodsNum = getCookie("goodsNum_" + item);
        var goodsPrice = getCookie("goodsPrice_" + item);

        // console.log(goodsId, goodsName, goodsImg, goodsNum, goodsPrice);

        html += `<tr productId="${goodsId}">
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="${goodsImg}" alt="" /><span>${goodsName}</span></td>
                    <td class="price">${(goodsPrice * 1).toFixed(2)}</td>
                    <td class="count"><span class="reduce">${goodsNum > 1 ? "-" : ""}</span>
                        <input class="count-input" type="text" value="${goodsNum}" />
                        <span class="add">+</span></td>
                    <td class="subtotal">${(goodsNum * goodsPrice).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`;
    })
    tbody.innerHTML = html;







    // 伪数组
    // 1. 可以通过下标取值 addList[0]  (伪数组不能通过下标赋值)
    // 2. 可以调用数组的length属性  addList.length
    // 3. 但是不能使用数组的拓展方法

    // 伪数组转真数组
    // 1. for循环遍历放到真数组中

    var addList = document.getElementsByClassName("add");
    var reduceList = document.getElementsByClassName("reduce");
    var deleteList = document.getElementsByClassName("delete");
    var deleteAll = document.getElementById("deleteAll");
    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");

    var numTotal = document.getElementById("selectedTotal");
    var priceTotal = document.getElementById("priceTotal");

    // var arr = [];
    // for (var i = 0; i < addList.length; i++) {
    //     arr.push(addList[i]);
    // }

    //加号  1.  input框中数量 加1    2.  小计更新    3.减号按钮内容出现"-" 

    for (var i = 0; i < addList.length; i++) {
        var add = addList[i];
        add.onclick = function () {
            // console.log(this);  //this 在点击事件中  属于谁就指向谁

            // input框加1
            var countInp = prev(this);
            var num = countInp.value;
            num++;
            countInp.value = num;

            // 2.  小计更新 
            var par = this.parentNode;

            var priceSpan = prev(par);
            var price = priceSpan.innerText;

            var subtotalSpan = next(par);
            subtotalSpan.innerText = (price * num).toFixed(2);

            // 减号按钮的“-”出现
            var reduce = prev(countInp);
            reduce.innerText = "-";
            getAll();
        }
    }

    // 减号   1. input 数值 减1   2. 小计更新   3. 如果数量为1  “-”消失

    for (var j = 0; j < reduceList.length; j++) {
        var reduce = reduceList[j];
        reduce.onclick = function () {
            // console.log(this);

            // 1. input 数值 减1 
            var countInp = next(this);
            var num = countInp.value;
            //num 在减之前判断数值是否为 1  ，如果为1 直接结束 
            if (num == 1) {
                return false;
            }

            num--;

            // num 在减之后判断数值是否为  1  ,如果为1 则"-" 消失
            if (num == 1) {
                this.innerText = "";
            }

            countInp.value = num;
            //小计更新 
            var par = this.parentNode;

            var priceSpan = prev(par);
            var price = priceSpan.innerText;

            var subtotalSpan = next(par);
            subtotalSpan.innerText = (price * num).toFixed(2);
            getAll();
        }

    }

    // 全选  
    checkAll.onclick = function () {
        // 获取 全选框 的状态
        var flag = this.checked;
        console.log(flag);

        for (var i = 0; i < checkOneList.length; i++) {
            checkOneList[i].checked = flag;  //更改每一个单选框的状态
        }
        getAll();
    }


    // 单选   点击时 判断是否全选(判断  单选框中为checked状态的个数  和  单选框的总个数)
    for (var n = 0; n < checkOneList.length; n++) {
        var checkOne = checkOneList[n];
        checkOne.onclick = function () {
            var count = 0;
            for (var i = 0; i < checkOneList.length; i++) {
                if (checkOneList[i].checked) {
                    count++;
                }
            }
            console.log(count);
            if (count == checkOneList.length) {
                checkAll.checked = true;
            } else {
                checkAll.checked = false;
            }
            getAll();
        }
    }





    // 单删  删除一整行

    for (var m = 0; m < deleteList.length; m++) {
        var deleteSpan = deleteList[m];
        deleteSpan.onclick = function () {
            // 先删除
            var tr = this.parentNode.parentNode;
            tr.remove();

            // 在判断 (删除之后判断 全选框是否被选中)
            var count = 0;
            for (var i = 0; i < checkOneList.length; i++) {
                if (checkOneList[i].checked) {
                    count++;
                }
            }
            console.log(count);
            if (count == checkOneList.length && count != 0) {
                checkAll.checked = true;
            } else {
                checkAll.checked = false;
            }
            getAll();
        }
    }


    // [1,2,3,4]

    // i=0  [2,3,4]
    // i=1  [2,4]

    // [1,2,3,4]
    // i = 0  [2, 3, 4]    i--   i++;
    // i = 0  [3,4]


    // 全删
    deleteAll.onclick = function () {
        for (var i = 0; i < checkOneList.length; i++) {
            var checkOne = checkOneList[i];

            if (checkOne.checked) {  // 判断单选框是否选中   选中则删除tr
                var tr = checkOne.parentNode.parentNode;  //tr
                tr.remove();
                i--;  // 返回上一级  防止因下标自增导致跳过某些元素
            }

        }
        checkAll.checked = false;
        getAll();
    }



    // 结算功能  (如果单选框被选中  我们就把选中的单选框的数量和小计 计算)

    function getAll() {
        var allNum = 0;
        var allPrice = 0;
        for (var i = 0; i < checkOneList.length; i++) {
            var checkOne = checkOneList[i];
            if (checkOne.checked) {

                // var par = checkOne.parentNode;
                // var countInp = next(next(next(par))).children[1];
                // console.log(countInp);

                var tr = checkOne.parentNode.parentNode; //tr
                var countInp = tr.getElementsByClassName("count-input")[0];
                // console.log(countInp);
                var num = countInp.value * 1;
                allNum += num;

                var subtotalSpan = tr.getElementsByClassName("subtotal")[0];
                var subtotal = subtotalSpan.innerText * 1;
                allPrice += subtotal;

            }
        }
        console.log(allNum, allPrice);
        numTotal.innerText = allNum;
        priceTotal.innerText = allPrice.toFixed(2);
    }









    // 查找上一个元素
    function prev(ele) {
        if (ele.previousElementSibling) {  //常规浏览器
            return ele.previousElementSibling;
        } else {// 低版本 IE  ele.previousElementSibling => undefined
            return ele.previousSibling;
        }
    }

    //  查找下一个元素
    function next(ele) {
        if (ele.nextElementSibling) {  //常规浏览器
            return ele.nextElementSibling;
        } else {// 低版本 IE  ele.nextElementSibling => undefined
            return ele.nextSibling;
        }
    }


















</script>

</html>